<template>
    <div class="app-container calendar-list-container">
        <!-- 查询条件 -->
        <div class="filter-container">
            <el-input @keyup.enter.native="onFilter" style="width: 200px;" class="filter-item" placeholder="标题" v-model="listQuery.name">
            </el-input>

            <el-button class="filter-item" type="primary" v-waves icon="search" @click="onFilter">搜索</el-button>
            <el-button class="filter-item" style="margin-left: 10px;" @click="onCreate" type="primary" icon="edit">添加</el-button>
        </div>

        <!-- 列表 -->
        <el-table size="mini" :data="list" v-loading="listLoading" element-loading-text="加载中，请稍后" border fit highlight-current-row style="width: 100%">

            <el-table-column type="index" width="30">
            </el-table-column>

            <el-table-column width="100px" align="center" label="产品代码">
                <template scope="scope">
                    <span>{{scope.row.code}}</span>
                </template>
            </el-table-column>

            <el-table-column align="center" label="产品名称">
                <template scope="scope">
                    <span>{{scope.row.name}}</span>
                </template>
            </el-table-column>

            <el-table-column width="180px" align="center" label="产品分类">
                <template scope="scope">
                    <span>{{ getDicText(scope.row.category) }}</span>
                </template>
            </el-table-column>

            <el-table-column width="150px" align="center" label="产品型号">
                <template scope="scope">
                    <span>{{ scope.row.type }}</span>
                </template>
            </el-table-column>

            <el-table-column width="100px" align="center" label="采购价">
                <template scope="scope">
                    <span>{{scope.row.price}}</span>
                </template>
            </el-table-column>

            <el-table-column width="100px" align="center" label="指导价">
                <template scope="scope">
                    <span>{{scope.row.guide_price}}</span>
                </template>
            </el-table-column>

            <el-table-column align="center" label="操作" width="150">
                <template scope="scope">
                    <el-button size="small" type="success" @click="onEdit(scope.row)">编辑
                    </el-button>
                    <el-button size="small" type="danger" @click="onDelete(scope.row,'deleted')">删除
                    </el-button>
                </template>
            </el-table-column>

        </el-table>

        <div v-show="!listLoading" class="pagination-container">
            <el-pagination @size-change="onSizeChange" @current-change="onCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]"
                :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>

        <!-- 表单对象 -->
        <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
            <el-form ref="appForm" :rules="rules" class="small-space" :model="form" label-position="left" label-width="100px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="产品名称" prop="name">
                            <el-input v-model="form.name" class="form-li"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="产品分类" prop="category">
                            <el-select v-model="form.category" placeholder="请选择">
                                <el-option v-for="item in dicArray['产品分类']" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="产品型号">
                            <el-input v-model="form.type" class="form-li"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="产品代码" prop="code">
                            <el-input v-model="form.code" class="form-li"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="生产厂家">
                            <el-input type="text" v-model="form.factory" class="form-li"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="采购价" prop="price">
                            <el-input type="number" v-model="form.price"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-form-item label="指导区间价" prop="guide_price">
                        <el-col :span="11">
                            <el-input type="number" v-model="form.min_guide_price"></el-input>
                        </el-col>
                        <el-col class="line" :span="2" style="text-align:center;">-</el-col>
                        <el-col :span="11">
                            <el-input type="number" v-model="form.guide_price"></el-input>
                        </el-col>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="单位">
                            <el-input type="text" v-model="form.unit" class="form-li"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="备注">
                            <el-input type="text" v-model="form.remark" class="form-li"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    import api from '@/api/product'
    import waves from '@/directive/waves/index.js' // 水波纹指令
    import { mapGetters } from 'vuex'

    export default {
        name: 'product',
        directives: {
            waves
        },
        data() {
            return {
                list: null,
                total: null,
                listLoading: true,
                listQuery: {
                    page: 1,
                    limit: 20,
                    name: '',
                    where: {
                        name: {
                            $like: null
                        }
                    }
                },
                form: {
                    id: null,
                    name: null,
                    type: null,
                    price: null,
                    guide_price: null,
                    min_guide_price: null,
                    factory: null,
                    category: null,
                    remark: null,
                },
                rules: {
                    name: [
                        { required: true, message: '请输入产品名称', trigger: 'blur' },
                    ],
                    type: [
                        { required: true, message: '请输入产品型号', trigger: 'blur' },
                    ],
                    category: [
                        { required: true, message: '请选择产品分类', trigger: 'blur' },
                    ],
                    price: [
                        { required: true, message: '请输入采购价', trigger: 'blur' },
                    ],
                    code: [
                        { required: true, message: '请输入产品代码', trigger: 'blur' },
                    ],
                    guide_price: [
                        { required: true, message: '请输入指导价', trigger: 'blur' },
                    ],
                    min_guide_price: [
                        { required: true, message: '请输入指导价', trigger: 'blur' },
                    ],
                },
                dialogTitle: '新增产品',
                dialogFormVisible: false,
            }
        },
        computed: {
            ...mapGetters([
                'dicArray', 'dicObj'
            ]),
        },
        async created() {
            await this.$store.dispatch('loadDic')
            await this.getList()
        },
        methods: {
            getDicText(guid) {
                return this.dicObj[guid] || ''
            },
            async getList() {
                this.listLoading = true
                this.listQuery.where.name.$like = `%${this.listQuery.name}%`
                let response = await api.page(this.listQuery)
                this.listLoading = false
                this.list = response.data.rows
                this.total = response.data.count
            },
            onFilter() {
                this.listQuery.page = 1
                this.getList()
            },
            onSizeChange(val) {
                this.listQuery.limit = val
                this.getList()
            },
            onCurrentChange(val) {
                this.listQuery.page = val
                this.getList()
            },
            onDelete(row) {
                this.$confirm('是否删除该产品?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    let ret = await api.remove(row)
                    if (ret.success) {
                        await this.getList()
                    }
                })
            },
            onCreate() {
                this.dialogTitle = '新增产品'
                this.resetForm()
                this.dialogFormVisible = true
            },
            onEdit(row) {
                this.dialogTitle = '修改产品'
                this.form = row
                this.dialogFormVisible = true
            },
            resetForm() {
                this.form = {
                    id: undefined,
                    name: '',
                    type: '',
                    price: undefined,
                    salePrice: undefined,
                    min_guide_price: undefined,
                    guide_price: undefined,
                }
            },
            async save() {
                this.$refs.appForm.validate(async (valid) => {
                    if (!valid) {
                        return
                    }
                    let ret = await api.save(this.form)
                    if (ret.success) {
                        this.$notify({
                            title: '成功',
                            message: '保存成功',
                            type: 'success',
                            duration: 2000
                        })
                        this.dialogFormVisible = false
                        await this.getList()
                    }
                });

            }
        }
    }

</script>
